/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import {Button, Row, Col, Transfer, Spin} from 'antd';
import styles from './style.css';
import {PAGE} from '../constants';
import {getProductCategories} from './api.js';
import {injectIntl} from './intl';

const listStyle = {
    width: '47%',
    height: '600px',
};

// 临时PageSize,将数据全取出来
const TMP_PAGE_SIZE = 500;
class ProductCategorySearchPanel extends React.PureComponent {
    state = {
        dataSource: {
            isFetching: false,
            total: 0,
            data: []
        },
        targetKeys: this.props.data || []
    };
    componentDidMount() {
        this.asyncQeruy();
        const index = this.props.data.findIndex(v => v.id === this.props.currentId);
        if(index === -1)
            return [];
        const value = this.props.data.find(v => v.id === this.props.currentId);
        this.setState({
            targetKeys: value.conditionValues
        });
    }

    handleChange = targetKeys => {
        this.setState({targetKeys});
    }

    asyncQeruy=con => {
        this.setState({dataSource: {
            isFetching: true
        }});
        const newCon = Object.assign({
            pageSize: TMP_PAGE_SIZE,
            pageIndex: PAGE.index
        }, con || {});
        
        getProductCategories(newCon).then(result => {
            if(result.ok && result.data)
                this.setState({
                    dataSource: {
                        isFetching: false,
                        total: result.data.totalElements,
                        data: result.data && result.data.content ? result.data.content.map(v => ({
                            key: v.id,
                            title: v.code,
                            description: v.name
                        })) : []
                    },
                });
            else
                this.setState({dataSource: {
                    isFetching: false,
                    total: 0,
                    data: []
                }});
        });
    }
      
    onConfirm=() => {
        this.props.selectData(this.state.targetKeys, this.props.currentId);
    }

    render() {
        return (
            <Spin spinning={this.state.dataSource.isFetching}>
                <Transfer
                    dataSource={this.state.dataSource.data}
                    showSearch
                    titles={[this.props.intl.formatMessage({
                        id: 'ProductCategorySearchPanel.dataToBeSelected',
                        defaultMessage: '待选择数据'
                    }), this.props.intl.formatMessage({
                        id: 'ProductCategorySearchPanel.selectedData',
                        defaultMessage: '已选择数据'
                    })]}
                    listStyle={listStyle}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => `${item.title}-${item.description}`}
                    footer={null}/>
                <Row>
                    <Col className={styles.transferButton}>
                        <Button type="primary" onClick={this.onConfirm}>{this.props.intl.formatMessage({
                            id: 'ProductCategorySearchPanel.btn.affirm',
                            defaultMessage: '确认'
                        })}</Button>
                    </Col>
                </Row>
                
            </Spin>
        );
    }
}

ProductCategorySearchPanel.propTypes = {
    selectData: PropTypes.func.isRequired,
    currentConditionName: PropTypes.string,
    currentId: PropTypes.string,
    data: PropTypes.array,
    onCancel: PropTypes.func,
};

import {connect} from 'react-redux';

export default connect(null, null)(injectIntl(ProductCategorySearchPanel));
